
{% extends  'base/front_base.html' %}
{% load news_filters %}

{% block title %}
    新闻详情-小饭桌
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="{% static 'css/news/news_detail.min.css' %}">
    <script src="{% static 'arttemplate/template-web.js' %}"></script>
    <script src="{% static 'js/news_detail.min.js' %}"></script>
    <script id="comment-item" type="text/html">
        {% verbatim %}
            <li>
                <div class="comment-info">
                    <img src="https://static-image.xfz.cn/1533546853_894.jpg" alt="">
                    <span class="author">{{ comment.author.username }}</span>
                    <span class="pub-time">{{ comment.pub_time|timeSince }}</span>
                </div>
                <p class="comment-content">{{ comment.content }}</p>
            </li>
        {% endverbatim %}
    </script>
{% endblock %}

{% block main %}
<div class="main">
    <div class="wrapper">
    <div class="main-content-wrapper">
        <div class="news-wrapper">
            <h1>{{ news.title }}</h1>
            <div class="news-info">
                <div class="info-group">
                    <span class="author">{{ news.author.username }}</span>
                    <span class="pub-time">{{ news.pub_time|time_since }}</span>
                    <span class="category">{{ news.category.name }}</span>
                </div>
                <div class="share-group">
                    <span>分享至：</span>
                    <a href="#" class="weixin share"></a>
                    <a href="#" class="weibo share"></a>
                </div>
            </div>
            <article class="article">
                <div class="content-detail">
                    {{ news.content|safe }}
                </div>
            </article>
        </div>
        <div class="comment-wrapper">
            <h3 class="title">文章评论（0）</h3>
            <textarea name="comment" class="comment-textarea nologin-textarea logined-textarea" placeholder="立即登录，参与评论~"></textarea>
            <div class="submit-btn-group">
                <button class="submit-btn" data-news-id="{{ news.pk }}">立即评论</button>
            </div>
        </div>
        <ul class="comment-list">
            {% for comment in news.comments.all %}
                <li>
                <div class="comment-info">
                    <img src="https://static-image.xfz.cn/1533546853_894.jpg" alt="">
                    <span class="author">{{ comment.author.username }}</span>
                    <span class="pub-time">{{ comment.pub_time|time_since }}</span>
                </div>
                <p class="comment-content">{{ comment.content }}</p>
            </li>
            {% endfor %}

        </ul>
    </div>
    <div class="sidebar-wrapper">
        <div class="title-group">
            <span class="title">在线课堂</span>
            <a href="#" class="more">更多</a>
        </div>
        <div class="advertise-group">
            <a href="#">
                <img src="https://static-image.xfz.cn/1534236783_765.png" alt="">
            </a>
        </div>
        <div class="platform-group">
            <div class="title-group">
                <span class="title">在线课堂</span>
            </div>
            <div class="focus-group">
                <ul class="left-group">
                    <li class="zhihu">
                        <a href="#" target="_blank">小饭桌创业课堂</a>
                    </li>
                     <li class="weibo">
                        <a href="#" target="_blank">小饭桌创业课堂</a>
                    </li>
                     <li class="toutiao">
                        <a href="#" target="_blank">小饭桌</a>
                    </li>
                </ul>
                <div class="right-group">
                    <p class="desc">扫码关注小饭桌微信公众平台xfz008</p>
                </div>
            </div>
        </div>
        <div class="hot-news-group">
            <div class="title-group">
                <span class="title">热门文章</span>
            </div>
            <ul class="hot-list-group">
                <li>
                    <div class="left-group">
                        <p class="title">
                            <a href="#">早报：三星技术泄露给中国公司；贾跃亭紧急仲裁诉求遭驳回</a>
                        </p>
                        <p class="more">
                            <span class="category">热点</span>
                            <span class="pub-time">12月01日</span>
                        </p>
                    </div>
                    <div class="right-group">
                        <a href="#">
                            <img src="https://static-image.xfz.cn/1543633027_774.jpg-website.news.list" alt="">
                        </a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</div>
{% endblock %}